<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 19:08:01
 -->
<template>
  <div>
    <div class="clearfix">
      <h3 class="fl">单位信息</h3>
      <el-button class="fr" type="text" @click="btnSetupUnit">单位设置</el-button>
    </div>
    <el-divider />
    <el-form
      ref="goodUnit"
      :model="dataObj"
      :label-position="'right'"
      :rules="ruleValidator"
      label-width="90px"
      class="w600 margin-t20"
    >
      <el-form-item label="基本单位:" prop="baseUnit">
        <el-select
          v-model="dataObj.baseUnit"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionsData.unit"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div v-for="(spObj, index) in viceUnit" :key="`${index}`">
        <el-form-item :label="`副单位 ${index+1}:`">
          <el-select
            v-model="spObj.value"
            allow-create
            filterable
            default-first-option
            placeholder="请选择"
            @change="(e) => {onSelectViceChange(index, e)}"
          >
            <el-option
              v-for="item in optionsData.unit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span>=</span>
          <el-input-number
            v-model="spObj.multi"
            style="width:100px"
            :min="1"
            placeholder="换算倍数"
          /> {{ baseUnitLabel }}
          <el-button type="danger" icon="el-icon-delete" circle @click="(e) => { btnDelUnit(e, index) }" />
        </el-form-item>
      </div>
      <el-button type="primary" plain @click="btnAddUnit">增加单位</el-button>
    </el-form>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listOptions } from '@/api/goods/unit.js'
import { delUnit } from '@/api/goods/goods-sku.js'

export default {
  name: 'GoodUnit',
  mixins: [oftenuse],
  props: {
    baseData: {
      type: Object,
      default: () => { return null }
    },
    multi: {
      type: Object,
      default: () => { return null }
    },
    oper: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      ruleValidator: {
        baseUnit: [{ required: true, message: '请选择基本单位', trigger: 'blur' }]
      },
      viceUnit: [],
      optionsData: {
        unit: []
      }
    }
  },
  computed: {
    baseUnitLabel: function() {
      const optionsData = this.optionsData.unit
      const value = this.dataObj.baseUnit
      return this.getLabelByValue(optionsData, value)
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    btnAddUnit() {
      if (!this.dataObj.baseUnit) return this.$message.error('请先选择基本单位！')
      const tempObj = { value: null, label: null, isBase: '0', multi: 1, isnew: true }
      this.viceUnit.push(tempObj)
    },
    btnDelUnit(e, index) {
      const item = this.viceUnit[index]
      if (this.oper !== 'edit') {
        this.delUnitFront(index)
        return
      }
      if (item.isnew) {
        this.delUnitFront(index)
      } else {
        const baseData = this.baseData
        if (!baseData) return
        const skuId = baseData.id
        const unitId = item.value
        this.delUnitPost(skuId, unitId, index)
      }
    },
    btnSetupUnit() {
      this.$router.push({ name: 'UnitList' })
    },
    // api
    delUnitFront(index) {
      this.$delete(this.viceUnit, index)
    },
    delUnitPost(skuId, unitId, index) {
      this.isAllowDel('删除该单位，对应的价格，条形码也会被删除，确定吗？').then(_ => {
        const params = { skuId, unitId }
        delUnit(params).then(res => {
          if (res.data.flag) {
            this.$notify.success({ title: '删除成功！' })
            this.delUnitFront(index)
            return
          }
          this.$notify.error({ title: '删除失败！', message: res.data.message })
        })
      })
    },
    setData({ unitBase, viceUnit }) {
      this.$set(this.dataObj, 'baseUnit', unitBase)
      this.viceUnit = viceUnit
    },
    getGoodUnitData() {
      const baseUnitvalue = this.dataObj.baseUnit
      if (!baseUnitvalue) return []
      const unitObj = this.getOptionsObjByValue(this.optionsData.unit, baseUnitvalue) || {}
      const baseUnit = {
        value: unitObj.value,
        label: unitObj.label,
        isBase: '1',
        multi: 1
      }
      const result = [baseUnit, ...this.viceUnit]
      return result
    },
    getLabelByValue(optionsData, value) {
      const resultArr = optionsData.filter(item => { return item.value === value })
      if (!resultArr.length) return null
      return resultArr[0].label
    },
    getOptionsObjByValue(optionsData, value) {
      const resultArr = optionsData.filter(item => { return item.value === value })
      if (!resultArr.length) return null
      return resultArr[0]
    },
    initData() {
      const pageInfo = this.pageInfo
      listOptions({ data: {}, page: pageInfo }).then(res => {
        if (!res.data.flag) return
        const data = res.data.data
        this.$set(this.optionsData, 'unit', data)
      })
    },
    // on
    onSelectViceChange(index, value) {
      const optionsData = this.optionsData.unit
      const label = this.getLabelByValue(optionsData, value)
      this.$set(this.viceUnit[index], 'label', label)
    }
  }
}
</script>
<style lang="scss" scoped>
.select-new{
 position: absolute;
 bottom: 0; text-align: center; background: #ffffff; padding: 5px;
 border: #cccccc 1px solid; width: 100%
}
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>

